<template>
  <div class="preivew-wrapper white-bg">
    <div class="header-bar">
      <div class="header-title">
        <div class="tags" v-if="datas?.ai_enabled">
          {{ tags[0] }}
        </div>
        <div class="tags" v-if="datas?.twin_abled">
          {{ tags[1] }}
        </div>

        <div class="title-text">{{ datas?.name }}</div>
      </div>
      <header-center
        @change-direction="handleChangeDirection"
        @change-size="handleChangeSize"
        @change-history="handleChangeHistory"
      />
      <div class="header-btns">
        <div class="btns" @click="handleBack">
          <span class="text">返回</span>
        </div>

        <template v-if="isHomeWork">
          <div class="btn-line"></div>
          <div class="header-btn" @click="handleGoTo">去完成作业</div>
        </template>
        <template v-else>
          <div class="btn-line" v-if="isShow"></div>
          <div class="btns" @click="handleGoTo" v-if="isShow">
            <img src="@/assets/icon-go.png" class="icons" />

            <span class="text">继续练习</span>
          </div>
          <div class="btn-line"></div>
          <div class="header-btn" @click="handleTo">开始新的练习</div>
        </template>
      </div>
    </div>
    <div class="preview-box">
      <div class="preview-sider">
        <sider-step :datas="datas" />
      </div>
      <div class="preview-main">
        <div class="iframe-box">
          <iframe :src="iframeUrlNew" ref="iframeRef" class="iframe"></iframe>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import headerCenter from "@/components/standard/header-center.vue";
import siderStep from "@/components/standard/sider-step.vue";
import { useRouter } from "vue-router";
import { onMounted, ref, computed } from "vue";
import { iframeUrl } from "@/utils/iframe";
import API from "@/api/user";
import api from "@/api";
import { useEventStore } from "@/store/modules/events";
import { useTipsStore } from "@/store/modules/tips";
const tipsStore = useTipsStore();
const store = useEventStore();
const router = useRouter();
//const iframeUrl = "http://localhost:5173/";
const tags = ref(["AI", "孪"]);
const query = computed(() => router.currentRoute.value.query);
const iframeUrlNew = computed(() => `${iframeUrl}&expid=${query.value.code}`);
const isShow = computed(() => {
  return query.value.expuid != null && query.value.expuid != "";
});
const isHomeWork = computed(() => {
  return query.value.homework_id != null && query.value.homework_id != "";
});
const datas = ref();
const getData = async () => {
  const res = await API.ExperimentFetchModel({
    experiment_id: query.value.id,
  });
  datas.value = res;
  console.log(res);
};

const isFirst = ref(true);
//这里调用新接口来判断是否第一次进入
const handleFirstEnter = async () => {
  const res = await api.apiBizUserExperimentGuideGetGuideByExperimentPost({
    experiment_id: query.value.id,
  });
  if (res.statusCode == 200 && res.data == null) {
    isFirst.value = true;
  }else{
    isFirst.value = false;
  }
  console.log(res);
};
const iframeRef = ref(null);
//实验3d交互方向控制
const handleChangeDirection = (value) => {
  console.log("实验3d交互方向控制", value);
  let datas = {
    type: "changeDirection",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
//实验3d交互大小控制
const handleChangeSize = (value) => {
  console.log("实验3d交互大小控制", value);
  let datas = {
    type: "changeSize",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
//实验3d交互历史记录控制
const handleChangeHistory = (value) => {
  console.log("实验3d交互历史记录控制", value);
  let datas = {
    type: "changeHistory",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
onMounted(async () => {
  await handleFirstEnter();
  await getData();
});
const handleBack = () => {
  router.back();
};
const handleGoTo = () => {
  store.setResetState();
  tipsStore.clearTipState();
  console.log("继续练习", query.value);
  if (query.value.type == 1) {
    router.push({
      path: "/experiment1",
      query: {
        id: query.value.id,
        type: query.value.type,
        code: query.value.code,
        expuid: query.value.expuid,
        report_id: query.value.report_id,
        homework_id: query.value.homework_id,
        isSave: true,
      },
    });
  } else if (query.value.type == 2) {
    router.push({
      path: "/experiment2",
      query: {
        id: query.value.id,
        type: query.value.type,
        code: query.value.code,
        expuid: query.value.expuid,
        report_id: query.value.report_id,
        homework_id: query.value.homework_id,
        isSave: true,
      },
    });
  } else if (query.value.type == 3) {
    router.push({
      path: "/experiment3",
      query: {
        id: query.value.id,
        type: query.value.type,
        code: query.value.code,
        expuid: query.value.expuid,
        report_id: query.value.report_id,
        homework_id: query.value.homework_id,
        isSave: true,
      },
    });
  }
};
const handleTo = async () => {
  store.setResetState();
  tipsStore.clearTipState();
  let params = {
    experiment_id: query.value.id,
    homework_id: query.value.homework_id,
    name: datas.value.name,
    source_id: query.value.source_id,
  };
  if (query.value.expuid) {
    if (query.value.type == 1) {
      router.push({
        path: "/experiment1",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: query.value.expuid,
          report_id: query.value.report_id,
          homework_id: query.value.homework_id,
        },
      });
    } else if (query.value.type == 2) {
      router.push({
        path: "/experiment2",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: query.value.expuid,
          report_id: query.value.report_id,
          homework_id: query.value.homework_id,
        },
      });
    } else if (query.value.type == 3) {
      router.push({
        path: "/experiment3",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: query.value.expuid,
          report_id: query.value.report_id,
          homework_id: query.value.homework_id,
        },
      });
    }
    return;
  }
  if (isFirst.value) {
    //第一次实验不做记录,需要开启引导
    //这里调用接口来通知已经使用过了,下次进来就不需要引导了
    await api.apiBizUserExperimentGuideCreateGuidePost({
      experiment_id: query.value.id,
    })
    if (query.value.type == 1) {
      console.log("继续练习", query.value);
      router.push({
        path: "/experiment1",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          isFirst: true,
        },
      });
    } else if (query.value.type == 2) {
      router.push({
        path: "/experiment2",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          isFirst: true,
        },
      });
    } else if (query.value.type == 3) {
      router.push({
        path: "/experiment3",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          isFirst: true,
        },
      });
    }

    return;
  }
  const res = await API.StudentExperimentCreateStudentExperiment(params);
  console.log(res, "res");
  if (res.student_experiment_id) {
    let expuid = res.student_experiment_id;
    if (query.value.type == 1) {
      router.push({
        path: "/experiment1",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: expuid,
          homework_id: query.value.homework_id,
        },
      });
    } else if (query.value.type == 2) {
      router.push({
        path: "/experiment2",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: expuid,
          homework_id: query.value.homework_id,
        },
      });
    } else if (query.value.type == 3) {
      router.push({
        path: "/experiment3",
        query: {
          id: query.value.id,
          type: query.value.type,
          code: query.value.code,
          expuid: expuid,
          homework_id: query.value.homework_id,
        },
      });
    }
    //  else {
    //   router.push({
    //     path: "/experiment",
    //     query: {
    //       id: query.value.id,
    //       name: query.value.name,
    //       tag: query.value.tag,
    //     },
    //   });
    // }
  }
};
</script>
<style lang="less" scoped>
.preivew-wrapper {
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  margin: -12px;
  box-sizing: border-box;
}

.header-bar {
  display: flex;
  padding: 0 16px;
  height: 50px;
  justify-content: space-between;
  border-bottom: 1px solid #cecece;
  .header-title {
    display: flex;
    align-items: center;
    .tags {
      padding: 0 8px;
      height: 24px;
      background: #eb61171a;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #eb6117;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }
    .title-text {
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #262930;
    }
  }
  .header-btns {
    display: flex;
    align-items: center;
    .btn-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 16px;
    }
    .btns {
      display: flex;
      align-items: center;
      height: 20px;
      cursor: pointer;
      .icons {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
      .text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #262930;
      }
    }
    .header-btn {
      padding: 0 14px;
      height: 30px;
      cursor: pointer;
      background: #2776ff;
      border-radius: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #ffffff;
    }
  }
}
.preview-box {
  height: calc(100% - 51px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  position: relative;
  .preview-sider {
    position: absolute;
    width: 64px;
    left: 16px;
    top: 50%;
    height: 336px;
    transform: translateY(-50%);
    background: #fff;
    z-index: 99;
    border-radius: 8px;
  }
  .preview-main {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    .iframe-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .iframe {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 0;
      }
    }
  }
}
</style>
